<template>
  <div>
    <cityHeader />
   <citySerch :allInfo='allCityInfo' @isShow='isShow' />
   <cityList :info='popularCityInfo' @goback='show' :allInfo='allCityInfo' :letter='letter' v-show="flag" />
   <cityABC :ABC='allABC' @getLetter='getLetterInfo' v-show="flag" />
   <goBackTop v-show="flag1"  />
  </div>
</template>

<script>
import cityHeader from './component/city-header'
import citySerch  from './component/city-search'
import cityList from './component/city-list'
import cityABC from './component/city-ABC'
import goBackTop from './component/goBackTop'
import { mpaState, mapGetters, mapState }from 'vuex'
import axios from 'axios'
import hub from '@/assets/js/hub.js'
export default {
    name:"City",
    components:{
        cityHeader,
        citySerch,
        cityList,
        cityABC,
        goBackTop
    },
    mounted(){
       this.getCityInfo()
      // this.lastCity=this.city
    },
    created(){
      hub.$on('sendRequest',()=>{
        console.log(132);
          this.getCityInfo()
      })
    },
    methods:{
      getCityInfo(){
        axios.get('/cityInfo.json?city='+this.city)
        //根据选择城市获取不同城市的内容
          .then(rs=>{
            //  console.log(rs.data);
            this.popularCityInfo=rs.data.data.hotCities
            this.allCityInfo=rs.data.data.cities
            this.allABC=Object.keys(rs.data.data.cities)
          },reason=>{
            console.log('失败');
          })
      },
      getLetterInfo(msg){
       this.letter=msg
      },
      isShow(bool){
        this.flag=bool
      },
      show(flag1){
        //控制返回顶部按钮是否显示
        this.flag1=flag1
      }
    },
    data(){
      return{
        popularCityInfo:[],
        allCityInfo:{},
        allABC:[],
        letter:'A',
        flag:true,
        flag1:false,
        // lastCity:''//记录上一次city 当city发生改变的时候重新发送数据请求
      }
    },
    computed:{
      //获取仓库数据
      ...mapState(['city'])
    },
    // activated () {
    //   //与mounted区别  加keepalive后 路由切换mounted只会执行一次
    //   //而因为有keepalive 就会多出来一个actived钩子函数，每次页面重新被显示的时候会执行
    //   if(this.lastCity!==this.city){
    //     this.lastCity=this.city;
    //     this.getCityInfo() //城市发生变化的时候就要去重新发起数据请求
    //   }
    // }
}
</script>

<style>

</style>